<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/WEB-INF/templates/portalTemplate.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:my="http://java.sun.com/jsf/composite/components">
	<ui:define name="content">

		<h:form>

			<rich:panel>
				<f:facet name="header">
					<h:outputText value="Lista kursów" />
				</f:facet>
				<rich:toolbar id="menu">
					<a4j:region>
						<a4j:commandButton value="Dodaj kurs" styleClass="buttonSmall"
							action="#{coursesBrowser.addCourse()}" render="@form"
							disabled="#{coursesBrowser.editMode}">

						</a4j:commandButton>

						<a4j:commandButton value="Edytuj kurs" styleClass="buttonSmall"
							action="#{coursesBrowser.editeCourse()}" render="@form"
							disabled="#{coursesBrowser.selection==null or coursesBrowser.editMode}">
						</a4j:commandButton>

						<a4j:commandButton value="Lekcje w kursie" styleClass="buttonSmall"
							action="#{coursesBrowser.goToLesson()}"
							disabled="#{coursesBrowser.selection==null or coursesBrowser.editMode}">
						</a4j:commandButton>
					</a4j:region>
				</rich:toolbar>

				<rich:panel id="edycjaPanel" rendered="#{coursesBrowser.editMode}">
					<a4j:region>

						<h:panelGrid columns="3">

							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Nr kursu" />
								<ui:param name="id" value="nrKursu" />
								<ui:param name="required" value="true" />
								<h:inputText id="nrKursu" value="#{coursesBrowser.course.number}"
									required="true" />
							</ui:decorate>

							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Tytuł" />
								<ui:param name="id" value="tytulKursu" />
								<ui:param name="required" value="true" />
								<h:inputText id="tytulKursu" value="#{coursesBrowser.course.title}"
									required="true" size="50" />
							</ui:decorate>

							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Wyświetl na stronie" />
								<ui:param name="id" value="widocznoscKursu" />
								<ui:param name="required" value="true" />
								<h:selectBooleanCheckbox id="widocznoscKursu"
									value="#{coursesBrowser.course.enabled}" />
							</ui:decorate>


							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Opis" />
								<ui:param name="id" value="opisKursu" />
								<ui:param name="required" value="false" />
								<ui:param name="labelWidth" value="100px" />
								<h:inputTextarea id="opisKursu"
									value="#{coursesBrowser.course.description}" cols="50" />
							</ui:decorate>

						</h:panelGrid>
						<h:panelGrid columns="5">
							<a4j:commandButton id="submit"
								action="#{coursesBrowser.saveCourse()}" value="Zapisz"
								execute="@region" render="@form" styleClass="buttonSmall">
							</a4j:commandButton>

							<a4j:commandButton id="cancel" immediate="true"
								action="#{coursesBrowser.closeEditMode()}" render="@form"
								value="Wyjdź" styleClass="buttonSmall"/>
						</h:panelGrid>
					</a4j:region>
				</rich:panel>

				<rich:extendedDataTable value="#{coursesBrowser.courses}" var="_row"
					id="tabela" selectionMode="single"
					selection="#{coursesBrowser.selection}">
					<a4j:ajax event="selectionchange" render="menu" immediate="true" />


					<rich:column>
						<f:facet name="header">
							<h:outputText value="Numer" />
						</f:facet>
						<h:outputText value="#{_row.number}" style="#{_row.enabled ? '' : 'color:grey;'}"/>
					</rich:column>

					<rich:column>
						<f:facet name="header">
							<h:outputText value="Tytuł" />
						</f:facet>
						<h:outputText value="#{_row.title}" style="#{_row.enabled ? '' : 'color:grey;'}"/>
					</rich:column>

					<rich:column>
						<f:facet name="header">
							<h:outputText value="Opis" />
						</f:facet>
						<h:outputText value="#{_row.description}" style="#{_row.enabled ? '' : 'color:grey;'}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Widoczność" />
						</f:facet>
						<h:outputText value="#{_row.enabled? 'Tak' : 'Nie'}" style="#{_row.enabled ? '' : 'color:grey;'}" />
					</rich:column>
				</rich:extendedDataTable>



			</rich:panel>




		</h:form>
	</ui:define>

</ui:composition>